<template>
  <div id="main-container" class="">
    <!-- 顶部卡片区域 -->
    <div id="main-top" class="w-2/3 m-auto py-8">
      <a-row id="top-cards-row" :gutter="20">
        <a-col :span="6" v-for="(item, index) in titleList" :key="index" :id="`top-card-${index}`" class="relative">
          <!-- <a-image :id="`top-card-${index}-image`" src="https://picsum.photos/id/237/240/100" :preview="false" class="object-cover p-2" />
          <a-typography-text :id="`top-card-${index}-title`" class="block mt-2 ml-1 text-base font-bold">
            
          </a-typography-text>
        -->
          <a-card hoverable>
            <template #cover>
              <a-image :id="`top-card-${index}-image`" :src="item.image" :preview="false" class="object-cover" />
            </template>
            <a-card-meta>
              <template #description>
                <a-typography-title :level="5" class="!text-[#666] !leading-[1.5] ml-[20px] mt-[25px]">{{ item.title }}</a-typography-title>
                <div :id="`top-card-${index}-arrow`" class="!text-right text-green-600 h-10 mt-[40px]">
                  <span class="w-10 h-10 absolute right-0 bottom-0 bg-gray-100 flex items-center justify-center text-[20px]"
                    ><ArrowRightOutlined
                  /></span>
                </div>
              </template>
            </a-card-meta>
          </a-card>
        </a-col>
      </a-row>
    </div>
    <!-- 内容区域 -->
    <div id="content-section" class="bg-gray-50 py-8">
      <div id="main-list" class="w-2/3 m-auto">
        <a-row
          v-for="(item, index) in bottomList"
          :key="index"
          :id="`content-row-${index}`"
          class="flex mb-8 bg-white border border-solid border-gray-200 rounded"
        >
          <a-col :span="12" :id="`content-row-${index}-image-col`" class="flex-1">
            <a-image :id="`content-row-${index}-image`" :src="item.image" :preview="false" class="object-cover aspect-[600/337]" />
          </a-col>

          <a-col :span="12" :id="`content-row-${index}-text-col`" class="flex-1 bg-white mx-8 my-2">
            <a-typography-title :id="`content-row-${index}-title`" :level="5" class="!text-3xl !font-[400] !mt-5 !ml-5 text-[#444]">
              {{ item.title }}
            </a-typography-title>
            <a-typography-paragraph
              :id="`content-row-${index}-paragraph`"
              class="m-5 leading-[1.5] text-[#333] text-[16px] mt-8 !font-[400]"
            >
              {{ item.content }}
            </a-typography-paragraph>
            <a-button :id="`content-row-${index}-button`" type="primary" size="large" class="!bg-[#2fc48d] !text-white ml-5 mt-5">
              探索更多
            </a-button>
          </a-col>
        </a-row>
      </div>
    </div>
  </div>
</template>

<script setup lang="jsx">
  const titleList = [
    {
      title: '多乐士2025年色彩 金盏黄',
      image: 'https://picsum.photos/id/27/640/359',
    },
    {
      title: '多乐士臻彩艺术漆',
      image: 'https://picsum.photos/id/27/640/359',
    },
    {
      title: '多乐士焕新服务',
      image: 'https://picsum.photos/id/27/640/359',
    },
    {
      title: '多乐士色彩工具',
      image: 'https://picsum.photos/id/27/640/359',
    },
  ];
  const bottomList = [
    {
      title: '多乐士2025年度色彩————金盏黄',
      content:
        '每一年，多乐士色彩专家都深入探索全球发展趋势，并将其转化为年度色彩。2025年，金盏黄成为年度色彩。这一抹鼓舞人心的黄色将为家中注入乐观向上的积极能量，让空间充满创造力，令人为之自豪。现在不妨探索一下，如何使用这抹正能量色调和灵感色盘为家中的墙面焕新潮流色彩。',
      image: 'https://picsum.photos/id/237/600/337',
    },
    {
      title: '多乐士2025年度色彩————金盏黄',
      content:
        '每一年，多乐士色彩专家都深入探索全球发展趋势，并将其转化为年度色彩。2025年，金盏黄成为年度色彩。这一抹鼓舞人心的黄色将为家中注入乐观向上的积极能量，让空间充满创造力，令人为之自豪。现在不妨探索一下，如何使用这抹正能量色调和灵感色盘为家中的墙面焕新潮流色彩。',
      image: 'https://picsum.photos/id/237/600/337',
    },
    {
      title: '多乐士2025年度色彩————金盏黄',
      content:
        '每一年，多乐士色彩专家都深入探索全球发展趋势，并将其转化为年度色彩。2025年，金盏黄成为年度色彩。这一抹鼓舞人心的黄色将为家中注入乐观向上的积极能量，让空间充满创造力，令人为之自豪。现在不妨探索一下，如何使用这抹正能量色调和灵感色盘为家中的墙面焕新潮流色彩。',
      image: 'https://picsum.photos/id/237/600/337',
    },
  ];
</script>

<style></style>
